<template>
    <div class="kefuList">
        <TopDesc desc="প্রশ্ন কর"></TopDesc>
        <template v-if="list">
            <div class="kf-list" v-for="item in list" :key="item.id">
                <!-- 问题 -->
                <div class="kf-question">
                    <div class="kf-question-title">প্রশ্ন:</div>
                    <div class="kf-question-content">{{ item.content }} </div>
                    <div class="kf-question-img" v-for="(ele, index) in item.images">
                        <img :src="ele" alt="">
                    </div>
                </div>
                <!-- 回答 -->
                <div class="kf-answer" v-if="item.reply">
                    <div class="kf-answer-title">প্রত্যুত্তর:</div>
                    <div class="kf-answer-content">{{ item.replyContent }} </div>
                </div>
                <!-- 日期 -->
                <div class="kf-date">
                    <div class="kf-date-key">সৃষ্টির সময়:</div>
                    <div class="kf-date-value">{{ new Date(item.created).toLocaleString() }}</div>
                </div>
            </div>
        </template>
        <noquestion v-else></noquestion>
        <!-- 按钮 -->
        <div class="bottom"><button class="btn" @click="toQuestion">প্রশ্ন জমা দিন</button></div>
    </div>
</template>
<script>
import noquestion from "./noquestion";
import { getfankuiListAPI } from '../../api'
import { jiami, jiemi } from "../../utils/AESKey.js";
export default {
    components: { noquestion },
    data() {
        return {
            list: []
        }
    },
    methods: {
        //获取反馈列表
        async getfankuiList() {
            const f = {
                query: {
                    pageNo: 1,
                    pageSize: 10,
                    thirdOrderId: ''
                }
            }
            f.query.thirdOrderId = this.$store.state.orderId
            const res = await getfankuiListAPI(jiami(f))
            console.log(jiemi(res.data), '反馈列表')
            this.list = jiemi(res.data).page.content
            console.log(this.list, '数据')
        },
        //提问题
        toQuestion() {
            this.$router.push('/kefu')
        }
    },
    created() {
        this.getfankuiList()
    }
}
</script>

<style lang="less" scoped>
.kefuList {
    width: 100vw;
    background-color: #f5f5f5;
    padding-bottom: (50/@a);
    padding-top: (60/@a);

    .kf-list {

        margin-bottom: (30/@a);

        .kf-question {
            margin-top: (15/@a);
            margin-left: (22/@a);

            width: (330/@a);
            background: #FFFFFF;
            border-radius: (10/@a);
            padding: (11/@a) (14/@a) (11/@a) (14/@a);

            .kf-question-title {
                font-size: (13/@a);
                font-family: Nirmala UI;
                font-weight: bold;
                color: #1B1B1B;
            }

            .kf-question-content {
                margin-top: (15/@a);
                font-size: (12/@a);
                font-family: Nirmala UI;
                font-weight: 400;
                color: #7D7D7D;
            }

            .kf-question-img {
                width: (200/@a);
                max-height: (100/@a);
                margin-top: (20/@a);

                img {
                    width: (200/@a);
                    max-height: (100/@a);
                }
            }
        }

        .kf-answer {
            margin-top: (6/@a);
            margin-left: (22/@a);
            width: (330/@a);
            height: (81/@a);
            background: #FFFFFF;
            border-radius: (10/@a);
            padding: (11/@a) (14/@a) (11/@a) (14/@a);

            .kf-answer-title {
                font-size: (13/@a);
                font-family: Nirmala UI;
                font-weight: bold;
                color: #1B1B1B;
            }

            .kf-answer-content {
                margin-top: (15/@a);
                font-size: (9/@a);
                font-family: Nirmala UI;
                font-weight: 400;
                color: #7D7D7D;
            }
        }

        .kf-date {
            width: (329/@a);
            height: (43/@a);
            margin-top: (6/@a);
            margin-left: (22/@a);
            background: #FFFFFF;
            border-radius: (10/@a);
            display: flex;
            justify-content: space-around;
            line-height: (43/@a);

            .kf-date-key {
                text-align: left;
                font-size: (13/@a);
                font-family: Nirmala UI;
                font-weight: bold;
                color: #1B1B1B;
                margin-right: (110/@a);
            }

            .kf-date-value {
                font-size: (13/@a);
                font-family: Nirmala UI;
                font-weight: 400;
                color: #7D7D7D;
            }
        }
    }

    .bottom {
        position: fixed;
        bottom: 0;
        left: 0;
        width: (375/@a);
        height: (70/@a);
        padding-bottom: (10/@a);
        z-index: 999;
        background-color: #fff;
        padding-bottom: (10/@a);
        padding-top: (10/@a);

        .btn {
            margin-left: (94/@a);
            width: (186/@a);
            height: (48/@a);
            background: #415AB8;
            border-radius: (10/@a);
            text-align: center;
            line-height: (48/@a);
            font-size: (14/@a);
            font-family: Nirmala UI;
            font-weight: bold;
            color: #FFFFFF;
        }
    }
}
</style>